<template>
  <div class="app-container home">
    <h1 style="text-align: center; margin-bottom: 20px;">第二课堂管理系统</h1>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-icon student-icon">
            <i class="el-icon-user"></i>
          </div>
          <div class="card-content">
            <div class="card-title">学生数量</div>
            <count-to :startVal="0" :endVal="counts.studentCount" :duration="2000" class="card-number" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-icon teacher-icon">
            <i class="el-icon-s-custom"></i>
          </div>
          <div class="card-content">
            <div class="card-title">教师数量</div>
            <count-to :startVal="0" :endVal="counts.teacherCount" :duration="2000" class="card-number" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-icon activity-icon">
            <i class="el-icon-date"></i>
          </div>
          <div class="card-content">
            <div class="card-title">活动数量</div>
            <count-to :startVal="0" :endVal="counts.activityCount" :duration="2000" class="card-number" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-icon credit-icon">
            <i class="el-icon-medal"></i>
          </div>
          <div class="card-content">
            <div class="card-title">学分数量</div>
            <count-to :startVal="0" :endVal="counts.creditCount" :duration="2000" class="card-number" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header">活动类型分布</div>
          <div ref="activityTypeChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header">每月活动数量统计</div>
          <div ref="monthlyActivityChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header">每月参与人数趋势</div>
          <div ref="monthlyActivityReg" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header">每月学分统计</div>
          <div ref="monthlyCreditChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import CountTo from 'vue-count-to';
import {countBigScreen,getActivityTypes,getMonthlyActivities,getMonthlyReg,getMonthlyCredit} from "@/api/app/bigScreen";

export default {
  name: "Index",
  components: {
    CountTo
  },
  data() {
    return {
      charts: {},
      counts: {
        studentCount: 0,
        teacherCount: 0,
        activityCount: 0,
        creditCount: 0
      }
    };
  },
  mounted() {
    this.getCounts();
    this.initCharts();
  },
  methods: {
    getCounts() {
      countBigScreen().then(response => {
        this.counts = response.data;
      });
    },
    initCharts() {
      this.initActivityTypeChart();
      this.initMonthlyActivityChart();
      this.initMonthlyActivityReg();
      this.initMonthlyCreditChart();
    },
    initActivityTypeChart() {
      const chart = echarts.init(this.$refs.activityTypeChart);
      getActivityTypes().then(response => {
        const data = response.data.map(item => ({
          value: item.value,
          name: item.name
        }));
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center'
          },
          series: [{
            name: '活动类型',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }]
        };
        chart.setOption(option);
        this.charts.activityType = chart;
      });
    },
    initMonthlyActivityChart() {
      const chart = echarts.init(this.$refs.monthlyActivityChart);
      getMonthlyActivities().then(response => {
        const data = response.data;
        const months = data.map(item => item.month);
        const values = data.map(item => item.value);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: months,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: '活动数量',
            type: 'bar',
            barWidth: '60%',
            data: values,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#83bff6'
              }, {
                offset: 0.5,
                color: '#188df0'
              }, {
                offset: 1,
                color: '#188df0'
              }])
            }
          }]
        };
        chart.setOption(option);
        this.charts.monthlyActivity = chart;
      });

    },
    initMonthlyActivityReg() {
      const chart = echarts.init(this.$refs.monthlyActivityReg);
      getMonthlyReg().then(response => {
        const data = response.data;
        const months = data.map(item => item.month);
        const values = data.map(item => item.value);
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: months,
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            name: '参与人数'
          },
          series: [{
            name: '参与人数',
            type: 'line',
            smooth: true,
            data: values,
            itemStyle: {
              color: '#409EFF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(64,158,255,0.3)'
              }, {
                offset: 1,
                color: 'rgba(64,158,255,0.1)'
              }])
            }
          }]
        };
        chart.setOption(option);
        this.charts.monthlyParticipants = chart;
      });
    },
    initMonthlyCreditChart() {
      const chart = echarts.init(this.$refs.monthlyCreditChart);
      getMonthlyCredit().then(response => {
        const data = response.data;
        const months = data.map(item => item.month);
        const values = data.map(item => item.value);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: months,
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            name: '学分数量'
          },
          series: [{
            name: '学分数量',
            type: 'bar',
            barWidth: '60%',
            data: values,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#67C23A'
              }, {
                offset: 1,
                color: '#95D475'
              }])
            }
          }]
        };
        chart.setOption(option);
        this.charts.monthlyCredit = chart;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  .data-card {
    display: flex;
    padding: 24px;
    margin-bottom: 20px;
    align-items: center;

    .card-icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24px;
      flex-shrink: 0;

      i {
        font-size: 32px;
        color: #fff;
      }

      &.student-icon {
        background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
      }

      &.teacher-icon {
        background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
      }

      &.activity-icon {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      }

      &.credit-icon {
        background: linear-gradient(135deg, #FC466B 0%, #3F5EFB 100%);
      }
    }

    .card-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .card-title {
        font-size: 16px;
        color: #606266;
        margin-bottom: 12px;
      }

      .card-number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
      }
    }
  }

  .chart-card {
    margin-bottom: 20px;

    ::v-deep .el-card__header {
      padding: 12px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #303133;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }

    ::v-deep .el-card__body {
      padding: 20px;
    }
  }
}
</style>

